<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
	    <script src="../js/jquery-1.11.1.js"></script>
		<!-- 01_元素内容操作:操作元素和元素内容的方式
		 html()   无参---功能：获取匹配元素集合中第一个元素
		          有参---功能：获取匹配元素集合中所有元素并替换
		 val()    无参---功能 针对表单元素；input select...
		                获取第一个
		          有参---功能：
		
		 text()   无参---获取匹配元素集合中所有元素的文本内容
		          有参--【设置】获取匹配元素集合中所有元素文本内容
		 特点：添加内容
		 -->  
	</head>
	<body>
		<button>html()函数 有参</button>
		<span>lorem1</span>
		<span>lorem2</span>
		<h1>val()函数的使用</h1>
		<button class="btn1">val()函数【input】无参</button>
		<input type="text" value="文本真实数据" />
		<input type="text" placeholder="文本框提示"/>
		<!-- html：按钮 .btn2 select>option*3 
		   jq：点按钮 显示第一个表单元素的值
		-->
		<br>
		<button class="btn2">val()函数【select】无参</button>
		<button class="btn3">val()函数【select】有参</button>
		<select name="" id="">
			<option value="rem1">lorem1</option>
			<option value="rem2">lorem2</option>
			<option value="rem3">lorem3</option>
		</select>
		<h1></h1>
		<button class="btn4">val()text函数无参</button>
		<button class="btn5">val()text函数有参</button>
		<p>lorem4</p>
		<p>lorem5</p>
		<p>lorem6</p>
		<script>
			//抓到无参按钮.点击.打印p的text值
			$(".btn4").click(function(){
				var ptext=$("p").text();
				alert(ptext)
			});
			//抓到有参按钮.点击.改变p中文本的内容:改变效果
			$(".btn4").click(function(){
				$("p").text("改变效果");
				alert(ptext)
			});
			
			//  $(".btn3").click(function(){
			// //	var vals=$("select").val("rem1");
			// //抓取打印select的JS对象默认
			// //抓取select的s对象.调用对象toString()方法。如果没有重写[object Object]
			//     $("select").val("rem1");
			// 	alert("val()针对下拉列表："+vals)
			//   });
			
			
			
			// $(".btn2").click(function(){
			// 	/* 下拉列表 抓select元素 */
			// 	var vals=$("select").val();
			// 	$("select").val();
			// 	alert("val()针对下拉列表："+vals)
			//  });
			
			
			
			// $(".btn1").click(function(){
			// 	/* 变量名不允许使用关键字  js中关键字 for in 遍历数组 */
			// 	var in=$("input").val();
			// 	alert("val()针对input元素 无参"+in)
			// });
			
			
			// 按钮 ，点击按钮 实现span内容 改成lorem lorem
			// $("button").click(function(){
			// 	$("span").html("<span>lorem</span>")
			// });
			
			
			/* 变量         js变量--jq变量
			   int i=1;    Java写法 强类型语言
			    var i=数值。元素; JavaAcript 弱类型语言
			*/
		   // var html=$("span").html();
		   // alert("html()函数的无参值："+html)
		   
		</script>
	</body>
</html>